// Copyright © SixtyFPS GmbH <info@slint.dev>
// SPDX-License-Identifier: MIT
import { Palette, Measurements } from "../common.slint";
import { HaText } from "general/haText.slint";

export component Appliance {
    in property <brush> background: #b5b5b5;
    in property <string> name;
    in property <string> id;
    in property <int> index;
    in property <bool> full-screen: false;
    in property <length> image-size: self.width;
    in property <string> time-remaining: "00:00 hrs";
    in property <image> appliance-image: @image-url("../images/microwave.jpg");
    property <color> text-color: Palette.appliance-background;
    tile := Rectangle {
        clip: true;
        background: Palette.appliance-background;
        border-radius: Measurements.tile-radius;
        Image {
            y: tile.height - self.height;
            width: tile.width;
            source: appliance-image;
        }

        VerticalLayout {
            padding: (tile.height > Measurements.small-height-tile) ? 18px : 9px;
            width: 100%;
            height: 100%;
            alignment: start;
            HaText {
                text: "Appliance";
                font-size: 8pt;
                font-weight: 400;
                color: Palette.appliance-alternate-foreground;
            }

            HaText {
                text: root.name;
                font-size: 10pt;
                font-weight: 400;
                color: Palette.appliance-foreground;
            }

            Rectangle {
                height: 5px;
            }

            VerticalLayout {
                spacing: -5px;
                HaText {
                    text: "Time Remaining: ";
                    font-size: 8pt;
                    font-weight: 400;
                    color: Palette.appliance-foreground;
                }

                HaText {
                    text: root.time-remaining;
                    font-size: 15pt;
                    font-weight: 500;
                    color: Palette.appliance-foreground;
                }
            }
        }
    }
}
